{% extends 'base.html' %}
{% import 'include/macros.html' as macros %}

{% block styles %}
    {{ super() }}
    <link href="{{ static('css/detail.css') }}" rel="stylesheet">
{% endblock %}

{% block page_content %}
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <div class="detail-heading card">
                <h2>{{ book.name }}</h2>
                <hr>
                <img style="float:left;" src="{{ book.image.url }}">
                <div>
                    <p>售 价：<span style="color:red;"><span
                            style="font-size:1.2em;">￥{{ book.discount_price }}</span>({{ book.discount }}折)</span>
                    </p>
                    <p>定 价：￥{{ book.original_price }}</p>
                </div>
                <p>作 者：{{ book.author }}</p>
                {% if book.translator %}
                    <p>译 者：{{ book.translator }}</p>
                {% endif %}
                <hr>
                <p>版 次：{{ book.revision }}</p>
                <p>页 数：{{ book.page_numbers }}</p>
                <p>出 版 社：{{ book.press }}</p>
                <p>出版日期：{{ book.published_date }}</p>
                <hr>
                <p>存 货 量：{{ book.stock }}</p>
                <p>销 售 量：{{ book.sales }}</p>
                <p>所属类别：{{ book.category.up.name }}<span class="text-muted"> / </span>
                    <a href="{{ url('book:category',args=(book.category.id,1,)) }}">{{ book.category.name }}</a>
                </p>
                <hr>
                <button class="btn btn-info"><span class="glyphicon glyphicon-star"></span> 收藏</button>
                <a href="{{ url('cart:add',args=(book.id,)) }}" class="btn btn-primary"><span class="glyphicon glyphicon-shopping-cart"></span> 加入购物车</a>
            </div>
            <div class="detail-content card">
                <h3>内容简介</h3>
                <hr>
                {{ book.content_brief | safe }}
            </div>
            <div class="detail-author card">
                <h3>作者简介</h3>
                <hr>
                {{ book.author_brief | safe }}
            </div>
            <div class="detail-catalog card">
                <h3>目录</h3>
                <hr>
                {{ book.catalog | safe }}
            </div>
            <div id="comments" class="detail-comment card">
                <h3>评论</h3>
                <hr>
                <ul style="list-style-type:none;padding:0;">
                    {% for c in comments %}
                        <li style="border-bottom:1px solid #ddd;margin-bottom:15px;">
                            {# 评论者信息 #}
                            <div>
                                {# 头像 #}
                                <a href="">
                                    <img style="float:left;" class="img-circle" width="40" height="40"
                                         src="{{ c.user.avatar.url }}"></a>
                                {# 点赞和评论 #}
                                <div style="float:right;">
                                    <a style="color:#b4b4b4;font-size:13px;" href="">
                                        <i class="glyphicon glyphicon-thumbs-up"></i> 25</a>
                                    <a style="color:#b4b4b4;font-size:13px;margin-left:10px;" href="">
                                        <i class="glyphicon glyphicon-comment"></i> 14</a>
                                </div>
                                {# 昵称 #}
                                <span style="margin-left:10px;font-size:16px;">{{ c.user.username }}</span>
                                {% for _ in range(c.score) %}
                                    <span style="font-size:.8em;color:#ffb000;" class="glyphicon glyphicon-star"></span>
                                {% endfor %}
                                {% for _ in range(5-c.score) %}
                                    <span style="font-size:.8em;color:#d3d3d3;"
                                          class="glyphicon glyphicon-star-empty"></span>
                                {% endfor %}
                                {# 发表时间 #}
                                <p style="margin-left:50px;font-size:11px;" class="text-muted">
                                    {{ c.published_time }}
                                </p>
                            </div>
                            {# 评论内容 #}
                            <div style="padding:15px;">
                                {{ c.content }}
                            </div>
                        </li>
                    {% endfor %}
                </ul>
                {% if pagination and pagination.paginator.num_pages > 0 %}
                    <nav style="text-align:center;">
                        {{ macros.pagination_widget(pagination,'book:detail',id=book.id,fragment='#comments') }}
                    </nav>
                {% else %}
                    <p style="text-align:center;">当前图书没有评论，确认收货之后才能评论 :)</p>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}